<%@ page import="battleship.Context" %>
<%@ page import="battleship.User" %>
<%@ page import="battleship.CacheFilter" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>

<html>

<head>

    <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">-->
    <title>Laevade pommitamine</title>
    <%--<link rel="stylesheet" type="text/css" href="main.css" />--%>
    <%--<link rel="stylesheet" type="text/css" href="game.css" />--%>
    <%--<script type="text/javascript" src="drag_drop.js"></script>--%>
    <%--<script type="text/javascript" src="jquery-1.7.1.js"></script>--%>
    <%--<script type="text/javascript" src="buffer.js"></script>--%>
    <%--<script type="text/javascript" src="local.js"></script>--%>
    <%--<script type="text/javascript" src="rankings.js"></script>--%>
    <%--<script type="text/javascript" src="replay.js"></script>--%>
    <%
        final String[] resources = {"main.css", "game.css", "min/jquery-1.7.1.js", "min/drag_drop.js",
                "min/buffer.js", "min/local.js", "replay.js"};
        ServletContext context = session.getServletContext();

        for (String resource : resources) {
            System.out.println(CacheFilter.getResource(context, resource));
            out.write(CacheFilter.getResource(context, resource));
        }
    %>
</head>


<body>

<%
    int id = Integer.parseInt(request.getParameter("id"));
    User user = Context.users[id];
    int opponentID = user.opponentID;
    User opponent = Context.users[opponentID];
%>

<div id="content">
    <div id="title_area">
        <h1 id="title_header">Laevade pommitamine</h1>
    </div>
    <div id="center_area">
        <div id="left">
            <div class="side_board">
                <table id="side_board">
                    <tr>
                        <td class="sb_corner"></td>
                        <td class="sb_topbottomedge">A</td>
                        <td class="sb_topbottomedge">B</td>
                        <td class="sb_topbottomedge">C</td>
                        <td class="sb_topbottomedge">D</td>
                        <td class="sb_topbottomedge">E</td>
                        <td class="sb_topbottomedge">F</td>
                        <td class="sb_topbottomedge">G</td>
                        <td class="sb_topbottomedge">H</td>
                        <td class="sb_topbottomedge">I</td>
                        <td class="sb_topbottomedge">J</td>
                        <td class="sb_corner"></td>
                    </tr>

                    <%
                        // mark cells according to current game status
                        for (int row = 1; row <= 10; row++) {
                    %>
                    <tr>
                        <td class="sb_leftrightedge"><%=row%></td>
                        <%
                            for (int col = 1; col <= 10; col++) {
                                int[] coords = new int[2]; coords[0] = row; coords[1] = col;
                                if (user.hit.contains(coords)) {
                                    if (user.sunk.contains(coords)) {
                        %><td class="sb_square checked"><img src='images/explosion.png' title='explosion' alt='explosion' height='13px' width='13px' /></td><%
                    } else {
                    %><td class="sb_square"><img src='images/explosion.png' title='explosion' alt='explosion' height='13px' width='13px' /></td><%
                        }
                    } else {
                    %><td class="sb_square"></td><%
                            }
                        }
                    %>
                        <td class="sb_leftrightedge"><%=row%></td>
                    </tr>
                    <%
                        }
                    %>

                    <tr>
                        <td class="sb_corner"></td>
                        <td class="sb_topbottomedge">A</td>
                        <td class="sb_topbottomedge">B</td>
                        <td class="sb_topbottomedge">C</td>
                        <td class="sb_topbottomedge">D</td>
                        <td class="sb_topbottomedge">E</td>
                        <td class="sb_topbottomedge">F</td>
                        <td class="sb_topbottomedge">G</td>
                        <td class="sb_topbottomedge">H</td>
                        <td class="sb_topbottomedge">I</td>
                        <td class="sb_topbottomedge">J</td>
                        <td class="sb_corner"></td>
                    </tr>
                </table>
            </div>
            <div id="ships" >
                <img id="0_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="1_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="2_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="3_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="4_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="5_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="6_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="7_" class="ship" src="images/3.png" width="100" height="25" alt="3-ruudu laev" title="3-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="8_" class="ship" src="images/3.png" width="100" height="25" alt="3-ruudu laev" title="3-ruudu laev" draggable="true" ondragstart="drag(event)" />
                <img id="9_" class="ship" src="images/4.png" width="130" height="25" alt="4-ruudu laev" title="4-ruudu laev" draggable="true" ondragstart="drag(event)"/>
            </div>
        </div>
        <div id="center">
            <div id="tableDiv">
                <table id="main_board" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <tr>
                        <td class="corner"></td>
                        <td class="topbottomedge">A</td>
                        <td class="topbottomedge">B</td>
                        <td class="topbottomedge">C</td>
                        <td class="topbottomedge">D</td>
                        <td class="topbottomedge">E</td>
                        <td class="topbottomedge">F</td>
                        <td class="topbottomedge">G</td>
                        <td class="topbottomedge">H</td>
                        <td class="topbottomedge">I</td>
                        <td class="topbottomedge">J</td>
                        <td class="corner"></td>
                    </tr>

                    <%
                        // mark cells according to current game status
                        for (int row = 1; row <= 10; row++) {
                    %>
                    <tr>
                        <td class="leftrightedge"><%=row%></td>
                        <%
                            for (int col = 1; col <= 10; col++) {
                                int[] coords = new int[2]; coords[0] = row; coords[1] = col;
                                if (user.hit.contains(coords)) {
                                    if (user.sunk.contains(coords)) {
                        %><td class="square checked"><img src='images/explosion.png' title='explosion' alt='explosion' height='28px' width='28px' /></td><%
                    } else {
                    %><td class="square"><img src='images/explosion.png' title='explosion' alt='explosion' height='28px' width='28px' /></td><%
                        }
                    } else {
                    %><td class="square"></td><%
                            }
                        }
                    %>
                        <td class="leftrightedge"><%=row%></td>
                    </tr>
                    <%
                        }
                    %>

                    <tr>
                        <td class="corner"></td>
                        <td class="topbottomedge">A</td>
                        <td class="topbottomedge">B</td>
                        <td class="topbottomedge">C</td>
                        <td class="topbottomedge">D</td>
                        <td class="topbottomedge">E</td>
                        <td class="topbottomedge">F</td>
                        <td class="topbottomedge">G</td>
                        <td class="topbottomedge">H</td>
                        <td class="topbottomedge">I</td>
                        <td class="topbottomedge">J</td>
                        <td class="corner"></td>
                    </tr>
                </table>
            </div>
            <div class="ready_button">
                <a id="valmis" class="ready" href="#" title="Valmis">Valmis</a>
            </div>
        </div>
        <div id="right">
            <ul class="menu">
                <li><a id="gameToLobby" class="item" href="#">Ooteruum</a></li>
                <%--<li><a class="item" href="#">Uus mäng</a></li>--%>
                <%--<li><a class="item" href="#">Anna alla</a></li>--%>
                <li><a id="gameToHS" class="item" href="#">Edetabel</a></li>
                <li><a id="replayOldGames" class="item" href="#">Vanemad mängud</a></li>
                <li><a id="logOutButton" class="item" href="#">Logi välja</a></li>
            </ul>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

</body>

</html>
